<template>
  <div id='video03_table'>
    <ul>
      <li>商品相关视频</li>
      <li>达人</li>
      <li>点赞数</li>
      <li>评论数</li>
      <li>转发数</li>
      <li>操作</li>
    </ul>
    <div v-infinite-scroll="loadMore"
         infinite-scroll-disabled="busy"
         infinite-scroll-distance="0"
         infinite-scroll-immediate-check="false">
      <table class="table">
        <tbody>
          <tr v-for="(item_son, index_son) in table_data01"
              :key="'table01' + index_son">
            <td class="td td_01">
              <div>
                <section>
                  <img :src='item_son.thumPic'>
                  <a :href="item_son.url"
                     target="_blank"><img src="@/assets/meng/hot_video18.png"></a>
                </section>

                <span>{{item_son.title}}</span>
              </div>
            </td>
            <td class="td td_02">
              <div>
                <img :src='item_son.logo'>
                <section>
                  <p>{{item_son.nickName}}</p>
                  <p>5小时前</p>
                </section>
              </div>
            </td>
            <td class="td td_03">
              <img src="@/assets/meng/l.png">
              <span>{{ format_num(item_son.favoriteCount)}}</span>
            </td>
            <td class="td td_04">
              <img src="@/assets/meng/l.png">
              <span>{{ format_num(item_son.commentCount)}}</span>
            </td>
            <td class="td td_05">
              <img src="@/assets/meng/l.png">
              <span>{{ format_num(item_son.shareCount)}}</span>
            </td>
            <td class="td td_06">
              <button @click="show_pop(item_son.awemeId)">查看详情</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>
<script>
export default {
  name: 'video03_table',
  components: {},
  props: ['id'],
  data() {
    return {
      table_data01: [],
      busy: false,
      page01: 1,
    }
  },
  computed: {},
  created() {
    this.get_data01()
  },
  mounted() {},
  methods: {
    get_data01() {
      let that = this
      this.busy = true
      this.$axios({
        method: 'get',
        url: '/api/aweme/find',
        params: {
          proId: that.id,
          pageIndex: that.page01,
          pageSize: 4,
        },
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.page01 += 1
            this.table_data01 = this.table_data01.concat(response.data.data)
            response.data.data.length < 4
              ? (this.busy = true)
              : (this.busy = false)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    loadMore() {
      this.get_data01()
    },
    show_pop(parm) {
      this.$emit('returnBack', parm)
    },
  },
}
</script>
<style scoped lang='less'>
#video03_table {
  padding-top: 30px;
  ul {
    display: flex;
    align-items: center;
    text-align: center;
    > li:nth-child(1) {
      width: 350px;
    }
    > li:nth-child(2) {
      width: 260px;
    }
    > li:nth-child(3) {
      width: 145px;
    }
    > li:nth-child(4) {
      width: 145px;
    }
    > li:nth-child(5) {
      width: 145px;
    }
    > li:nth-child(6) {
      flex: 1;
    }
    height: 48px;
    background-color: #f5f9ff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #555555;
  }
  > div {
    height: 533px;
    width: 100%;
    overflow: auto;
  }
  table {
    tbody {
      td {
        height: 176px;
      }
      .td_06 {
        text-align: center;
      }
      .td_03,
      .td_04,
      .td_05 {
        width: 145px;
        text-align: center;
        font-family: DINAlternate-Bold;
        img {
          width: 16px;
          margin-right: 3px;
          vertical-align: -4px;
        }
      }
      .td_02 {
        width: 260px;
        > div {
          display: flex;
          align-items: center;
          justify-content: center;
          > img {
            width: 50px;
            height: 50px;
            margin-right: 13px;
            border-radius: 50%;
          }
          section {
            > p:first-child {
              font-size: 16px;
              color: #222;
              margin-bottom: 4px;
              font-weight: 600;
            }
            > p:last-child {
              font-size: 14px;
              color: #555;
            }
          }
        }
      }
      .td_01 {
        width: 350px;
        > div {
          display: flex;
          align-items: center;

          > section:nth-child(1):hover {
            > a {
              display: block !important;
            }
          }
          > section:nth-child(1) {
            margin-right: 22px;
            position: relative;
            margin-right: 18px;
            > img {
              width: 80px;
              height: 116px;
              border-radius: 4px;
            }
            > a {
              position: absolute;
              top: 50%;
              cursor: pointer;
              left: 50%;
              transform: translate(-50%, -50%);
              display: none;
            }
          }
          span {
            font-weight: 600;
            display: inline-block;
            width: 205px;
            font-size: 16px;
            line-height: 24px;
            color: #222222;
          }
        }
      }
      button {
        width: 88px;
        height: 32px;
        background-color: #fd7f2c;
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        line-height: 30px;
      }
    }
  }
}
</style>